<template>
  <a-form :model="form" layout="vertical" autocomplete="off">
    <a-form-item label="纸张大小：">
      <a-space>
        <div>
          长：
          <a-form-item-rest>
            <a-input-number v-model:value="form.width" style="width: 90px"></a-input-number> mm
          </a-form-item-rest>
        </div>

        <div class="ml-6">
          宽：
          <a-form-item-rest>
            <a-input-number v-model:value="form.height" style="width: 90px"></a-input-number> mm
          </a-form-item-rest>
        </div>
      </a-space>
    </a-form-item>
    <a-form-item label="偏移量：">
      <a-space>
        <div>
          上：
          <a-form-item-rest
            ><a-input-number v-model:value="form.offsetX" style="width: 90px"></a-input-number> mm</a-form-item-rest
          >
        </div>

        <div class="ml-6">
          左：
          <a-form-item-rest
            ><a-input-number v-model:value="form.offsetY" style="width: 90px"></a-input-number> mm</a-form-item-rest
          >
        </div>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { canvasFormSource } from '../form'

const props = defineProps<{
  canvasForm: any
}>()

const form = ref<any>({})
if (props.canvasForm) {
  form.value = props.canvasForm
} else {
  form.value = canvasFormSource()
}

const emits = defineEmits(['setCanvas'])
watch(
  form,
  () => {
    emits('setCanvas', form)
  },
  { immediate: true }
)
</script>
